<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ife.baidu.task32</title>
    <link rel="stylesheet" href="style/main.css">
</head>
<body>
    <div id="container">
        <div id="factory">
            <fieldset id="type">
                <legend>表单类型</legend>
                <label for="input">输入框</label><input type="radio" name="input" id="input" checked data-index=0>
                <label for="radio">单选框</label><input type="radio" name="radio" id="radio" data-index=1>
                <label for="checbox">复选框</label><input type="radio" name="checkbox" id="checkbox"  data-index=2>
                <label for="select">下拉框</label><input type="radio" name="select" id="select" data-index=3>
                <label for="textArea">文本域</label><input type="radio" name="textArea" id="textArea" data-index=4>
            </fieldset>
            <fieldset id="config">
                <legend>配置</legend>
                <label for="name">名称</label><input type="text" name="name" id="formName" value="输入框">
                <label for="necessary">必填</label><input type="checkbox" name="necessary" id="formNecessary" checked>
                
            </fieldset>
            <fieldset id="rule">
                <legend>规则</legend>
                <label for="text">文字或数字</label><input type="radio" name="text" id="text" checked>
                <label for="mail">邮箱</label><input type="radio" name="mail" id="mail">
                <label for="phoneNumber">电话号码</label><input type="radio" name="phoneNumber" id="phoneNumber">
                <label for="password">密码</label><input type="radio" name="password" id="password">
            </fieldset>
            <fieldset id="length">
                <legend>长度限制</legend>
                <label for="minLength">长度限制</label>
                <input type="text" value="4" name="minLength" id="minLength">--
                <input type="text" value="16" name="maxLength" id="maxLength">
                <div id="err"></div>
            </fieldset>

            <fieldset id="choice">
                <legend>选项</legend>
                <input type="text" id="choiceInput" placeholder="请输入可选项，用逗号/分号/句号分隔">
                <div id="choiceTag"></div>
            </fieldset>
            <div id="create"><button>创建表单</button></div>

            
            

        </div>
        <div id="right">
            <h2>表单展示区</h2>
            <div id="formArea"></div>
            <div id="submit"><button>提交</button></div>
        </div>
    </div>
</body>
<script src="scripts/main.js"></script>
<!--<script src="scripts/app.js"></script>-->
<script src="scripts/util.js"></script>
<!--<script src="scripts/factory.js"></script>-->
<script src="scripts/form.js"></script>

</html>